<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>活动列表</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
</head>
<body>
<blockquote class="layui-elem-quote list_search">
    <div class="layui-inline">
        <select id="status" name="status" style="height: 35px;border-radius: 3px;border-color: #b2b2b2" lay-verify="" lay-search>
            <option value="">-审核状态-</option>
            <option value="0">未审核</option>
            <option value="1">已审核</option>
        </select>
    </div>
    <div class="layui-inline">
        <select id="role" name="role" style="height: 35px;border-radius: 3px;border-color: #b2b2b2" lay-verify="" lay-search>
            <option value="">-发布角色-</option>
            <option value="0">用户发布</option>
            <option value="1">商户发布</option>
            <option value="2">物业发布</option>
        </select>
    </div>

    <div class="layui-inline">
        <a class="layui-btn layui-btn-normal findByTitle"
           data-type="findByTitle"><i class="layui-icon">&#xe63d;</i>搜索</a>
    </div>
<script type="text/html" id="sratus">
    <input type="checkbox" name="id" value="{{d.id}}" title="审核通过" lay-filter="lockStatus" {{ d.status == 1 ?'checked' : '' }}>
</script>
<script type="text/html" id="roleId">
    {{#  if(d.roleId == 1){ }}
    <span>商户</span>
    {{#  } else if(d.roleId == 2){ }}
    <span>物业</span>
    {{#  } else { }}
    <span>用户</span>
    {{# } }}
</script>
<table id="dynamicList" lay-filter="dynamicList" class="layui-hidden"></table>
<script th:src="@{/src/layui.js}"></script>
<script>
    layui.use(['jquery','layer','laypage','laytpl','table','laydate','form'],function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laypage = layui.laypage,
            laytpl = layui.laytpl,
            form = layui.form,
            table = layui.table,laydate = layui.laydate;
        table.render({
            elem:'#dynamicList',
            url:'/hot/list',
            title:'商品列表',
            cellMinWidth:80,
            page:true,
            limit:10,
            cols:[
                [
                    {type:'checkbox'},
                    {title:'ID',field:'id'},
                    {title:'发布账户',field:'account'},
                    {title:'活动内容',field:'content'},
                    {title:'发布角色',field:'roleId',templet:'#roleId'},
                    {title:'开始时间',field:'startTime'},
                    {title:'结束时间',field:'endTime'},
                    {title:'活动地点',field:'place'},
                    {title:'审核状态',field:'status',templet:'#sratus'}
                ]
            ],parseData:function(result){
                return {
                    code:result.code==200?0:result.code,
                    msg:result.message,
                    count:result.data.total,
                    data:result.data.list
                }
            }
            ,initSort: {
                field: 'createTime' //排序字段，对应 cols 设定的各字段名
                ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
        });

        //模糊查询
        $('.findByTitle').click(function () {
            table.reload('dynamicList', {
                url: '/hot/list'
                ,where: {
                    roleId:$('#role').val(),
                    status:$('#status').val()
                } //设定异步数据接口的额外参数
                ,initSort: {
                    field: 'createTime' //排序字段，对应 cols 设定的各字段名
                    ,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
                ,parseData:function(result){
                    return {
                        code:result.code==200?0:result.code,
                        msg:result.message,
                        count:result.data.total,
                        data:result.data.list
                    }
                }
            });
        })
        //监听锁定事件
        form.on('checkbox(lockStatus)',function (data) {
            var id = data.elem.value;
            var status = data.elem.checked?1:0;
            $.ajax({
                url:'/hot/hotStatus',
                data:{id:id,status:status},
                type:'put',
                dataType:'json',
                success:function (res) {
                    if(res.code == 200){
                        layer.msg('更新成功',{icon:1,time:1000},function () {
                            table.reload('dynamicList',{});
                        });
                    }else{
                        layui.msg('更新失败',{icon:5});
                    }
                }
            })
        })
    })
</script>

</body>
</html>